<template>
    <div class="menuNav">
        <h5>后台管理系统</h5>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/pages/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown @command="handleCommand" menu-align='start'>
			<img :src="Averdefault" class="avator">
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="home">首页</el-dropdown-item>
				<el-dropdown-item command="signout">退出</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
    </div>
</template>

<script>
import Averdefault from '../assets/img/default.jpg'
export default {
    name: 'menuNav',
    data() {
        return {
            Averdefault: Averdefault
        }
    },
    methods: {
        handleCommand(command) {
            console.log(command)
            if(command === 'home') {
                this.$router.push('/home')
            } else if(command === 'signout') {
                console.log('退出登录')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .menuNav {
        width: 100%;
        height: 49px;
        line-height: 0;
        @include sColor(bg, bgEFF2F7);
        display: flex;
        justify-content: space-between;
        align-items: center;
        /deep/ .el-breadcrumb {
            line-height: 49px;
            padding-left: 220px;
            box-sizing: border-box;
        }
        .avator {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 37px;
        }
        h5 {
            width: 200px;
            height: 49px;
            line-height: 49px;
            text-align: center;
            // background: #FF5274;
            @include sColor(bg, bgFF5274);
            color: #fff;
            margin: 0;
            padding: 0 15px;
            box-sizing: border-box;
            font-size: 16px;
            position: fixed;
            top: 0;
            z-index: 10;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
        }
    }
</style>>